<script>
  import $ from '../dfish.js'
  import {
    h
  } from 'vue'
  import FileUpload from './FileUpload.vue'
  import MediaUploadItem from './MediaUploadItem.vue'
  import ButtonBar from './ButtonBar.vue'
  import Button from './Button.vue'
  import Img from './Img.vue'

  export default {
    name: 'w-mediaupload',
    mixins: [FileUpload],
    props: ['thumbnailWidth', 'thumbnailHeight', 'showFileName'],
    provide() {
      return {
        provideUpload: this
      }
    },
    methods: {
      x_default() {
        return {
          fileTypes: 'video',
          //valign: 'top',
          thumbnailWidth: 80,
          thumbnailHeight: 80,
        }
      },
      html_list() {
        return this.list.map(item => {
          return h(MediaUploadItem, {
            item
          })
        })
      },
      html_input_button() {
        return h(ButtonBar, {
          ref: 'uploadbbr',
          class: 'w-fileupload-bbr',
          gap: 10,
        }, {
          default: () => [this.$slots.button ? this.$slots.button() : h(Button, {
            ref: 'uploadbutton',
            title: $.loc.form.choose_image,
            icon: '.f-i .f-i-plus',
            class: 'w-mediaupload-button',
            style: {
              width: $.unitSize(this.x.thumbnailWidth),
              height: $.unitSize(this.x.thumbnailHeight)
            },
            onclick: this.chooseFile
          })]
        })
      },
      html_input() {
        return this.html_input_form().concat(h('div', {
          class: ['w-mediaupload-list f-flex', {'f-h-gap': $.br.compat.gap}]
        }, [this.html_list(), this.canUpload && this.html_input_button()]))
      },
    },
    computed: {
      html_style() {
        return {
          '--w-label-min-height': $.unitSize(this.x.thumbnailHeight),
        }
      }
    }
  }
</script>

<style>
  .w-mediaupload.z-h-valign-top,
  .w-mediaupload.z-h-valign-top>.w-input {
    align-items: flex-start;
  }

  .w-mediaupload.z-h-valign-bottom,
  .w-mediaupload.z-h-valign-bottom>.w-input {
    align-items: flex-end;
  }

  .w-mediaupload.z-h-align-center>.w-input {
    justify-content: center;
  }

  .w-mediaupload.z-h-align-right>.w-input {
    justify-content: flex-end;
  }

  .w-mediaupload>.w-input {
    height: 100%;
  }

  .w-mediaupload>.w-label {
    min-height: var(--w-label-min-height);
  }

  .w-mediaupload-list {
    align-items: flex-start;
    flex-wrap: wrap;
    --w-compat-gap: 10px;
    gap: var(--w-compat-gap);
  }

  .w-mediaupload-value,
  .w-mediaupload-button {
    position: relative;
  }

  .w-mediaupload-button {
    border: 1px solid #ddd;
  }

  .w-mediaupload-value {
    box-sizing: border-box;
  }

  .w-mediaupload-value.z-loading .w-mediaupload-progress:before,
  .w-mediaupload-value.z-err .w-mediaupload-progress:before,
  /* .w-mediaupload-value .w-img:hover:not(.z-canplay) .w-img-gut:after */
    {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .2);
  }

  .w-mediaupload-button .w-button-icon {
    font-size: 36px;
    color: #bbb;
  }

  .w-mediaupload-value:hover .w-mediaupload-value-close {
    visibility: visible;
  }

  .w-mediaupload-value-close {
    position: absolute;
    visibility: hidden;
    cursor: pointer;
    top: 1px;
    right: 1px;
    width: 24px;
    height: 24px;
    color: #fff;
    background: rgba(0, 0, 0, .6);
  }

  .w-mediaupload-value-close:hover {
    color: #f33;
  }

  .w-mediaupload-value .w-img-gut {
    border: 1px solid #ddd;
  }

  .w-mediaupload-value.z-err {
    border: 1px solid #f00;
  }

  .w-mediaupload-value.z-err .w-mediaupload-progress-loading {
    display: none;
  }

  .w-mediaupload-value.z-err .w-mediaupload-progress:before {
    content: '上传失败';
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, .5);
  }

  .w-mediaupload-cover-play {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
  }

  .w-mediaupload-cover-play:before {
    transform: translateX(2px);
  }

  .w-mediaupload.z-err .w-mediaupload-button {
    border-color: #f00;
  }
</style>
